{% extends "admin/layout.html" %}
{% block title %}
    <title>创建文章</title>
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='backend/lib/editmd/css/editormd.css') }}"/>
{% endblock %}
{% block main %}
    {% with messages = get_flashed_messages(with_categories=True, category_filter=('success')) %}
        {% if messages %}
            <ul>
                {% for (category, message) in messages %}
                    <li>{{ message }}||{{ category }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">文章编辑</h1>
    </div>
    <form action="{{ url_for('admin.admin_post') }}" method="POST">
        {{ form.hidden_tag() }}
        <p><a href="{{ url_for('admin.admin_post_list') }}" class="btn btn-lg btn-light">返回列表</a>&nbsp;&nbsp;<!--<button
                class="btn btn-lg btn-dark" type="submit">提交博客
        </button>-->{{ form.submit }}
        </p>
        <div class="col-md-12">
            <div class="form-group">
                {{ form.title.label }}
                {{ form.title }}
                {#                <input type="text" class="form-control" id="exampleFormControlInput1" required name="title">#}
                {% for error in form.title.errors %}
                    <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            {#            <div class="content-img">#}
            {#                <ul class="content-img-list">#}
            {#                    <!-- <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li> -->#}
            {#                </ul>#}
            {#                <div class="file">#}
            {#                    <i class="ico-plus"></i>上传图片，支持jpg/png<input type="file" name="file" accept="image/*" id="upload">#}
            {#                </div>#}
            {#            </div>#}
            <div class="form-group">
                {{ form.cover.label }}
                <div class="form-control">
                    <input type="file" name="FileUpload" id="FileUpload">
                    <a class="btn btn-primary" id="btn_upload">上传图片</a>
                    {#                <input id="btn_upload" type="button" value="上传" onclick="onsubmit" class="file form-control"/>#}
{#                    <div id="showFileName"></div>#}
                </div>
                {{ form.cover }}
                {% for error in form.cover.errors %}
                    <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.desc.label }}
                {{ form.desc }}
                {#                <label for="exampleFormControlTextarea1">文章概述</label>#}
                {#                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required name="desc"></textarea>#}
                {% for error in form.desc.errors %}
                    <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.category.label }}
                {#                <label for="exampleFormControlSelect1">文章类别</label>#}
                {{ form.category }}
                {#                <select class="form-control" id="exampleFormControlSelect1" required name="category">#}
                {#                    <option>1</option>#}
                {#                    <option>2</option>#}
                {#                    <option>3</option>#}
                {#                    <option>4</option>#}
                {#                    <option>5</option>#}
                {#                </select>#}
                {% for error in form.category.errors %}
                    <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            {#              <div class="form-group">#}
            {#                <label for="bloglabel">文章标签</label>#}
            {#                <div id="bloglabel">#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="1" name="bloglabel">#}
            {#                    <label class="form-check-label">【云计算】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="2" name="bloglabel">#}
            {#                    <label class="form-check-label">【大数据】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="3" name="bloglabel">#}
            {#                    <label class="form-check-label">【Java】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="4" name="bloglabel">#}
            {#                    <label class="form-check-label">【C#】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="5" name="bloglabel">#}
            {#                    <label class="form-check-label">【JavaScript】</label>#}
            {#                  </div>#}
            {#                </div>#}
            {#              </div>#}
            <div class="form-group">
                {{ form.top.label(for="blogfirst") }}
                {#                <label for="blogfirst">是否置顶</label>#}
                <div id="blogfirst">
                    {% for item in form.top %}
                        <div class="form-check form-check-inline">
                            {{ item() }}
                            {{ item.label }}
                        </div>
                    {% endfor %}
                    {#                    <div class="form-check form-check-inline">#}
                    {#                        <input class="form-check-input" type="radio" name="top" id="inlineRadio1"#}
                    {#                               value="1">#}
                    {#                        <label class="form-check-label" for="inlineRadio1">【√ 是】</label>#}
                    {#                    </div>#}
                    {#                    <div class="form-check form-check-inline">#}
                    {#                        <input class="form-check-input" type="radio" name="top" id="inlineRadio2"#}
                    {#                               value="2" checked>#}
                    {#                        <label class="form-check-label" for="inlineRadio2">【× 否】</label>#}
                    {#                    </div>#}
                    {% for error in form.top.errors %}
                        <span style="color: red;">[{{ error }}]</span>
                    {% endfor %}
                </div>
            </div>
            <div class="form-group">
                {{ form.body.label }}
                {{ form.body }}
            </div>
{#            <div id="layout">#}
{#                <h5 style="margin-top: 20px">文章内容</h5>#}
{#                <div id="my-editormd" class="editormd">#}
                    {#                  <textarea style="display:none;"></textarea>#}
{#                    {{ form.content(style="display:none;") }}#}
{#                </div>#}
{#            </div>#}
        </div>
    </form>
{% endblock %}
{% block js %}
      {{ ckeditor.load(custom_url=url_for('static', filename='backend/lib/ckeditor/ckeditor.js')) }}

{#    <script src="{{ url_for('static', filename='backend/lib/ckeditor/ckeditor.js') }}"></script>#}
{#    <script src="{{ url_for('static', filename='backend/lib/editmd/jquery.min.js') }}"></script>#}
{#    <script src="{{ url_for('static', filename='backend/lib/editmd/editormd.js') }}"></script>#}
{#    <script type="text/javascript">#}
{#        var myEditor;#}
{#        $(function () {#}
{#            myEditor = editormd("my-editormd", {#}
{#                // width   : "100%", 不要添加#}
{#                height: 740,#}
{#                //syncScrolling : "single",#}
{#                path: "{{ url_for('static', filename='backend/lib/editmd/') }}",#}
{#                //theme : "dark", //设置主题#}
{#                //previewTheme : "dark",#}
{#                //editorTheme : "pastel-on-dark",#}
{#                //markdown : md,#}
{#                toolbarIcons: function () { //工具栏设置#}
{#                    var full = editormd.toolbarModes["full"];#}
{#                    for (i = 0; i < full.length; i++) {#}
{#                        //去除工具栏的全屏功能#}
{#                        if (full[i] === "fullscreen") {#}
{#                            full.splice(i, 1);#}
{#                        }#}
{#                        //去除工具栏的表情符#}
{#                        if (full[i] === "emoji") {#}
{#                            full.splice(i, 1);#}
{#                        }#}
{#                        //去除工具栏的HTML实体符号#}
{#                        if (full[i] === "html-entities") {#}
{#                            full.splice(i, 1);#}
{#                        }#}
{#                        //去除工具栏的帮助功能#}
{#                        if (full[i] === "help") {#}
{#                            full.splice(i, 1);#}
{#                        }#}
{#                    }#}
{#                    return full; // full, simple, mini#}
{#                },#}
{#                codeFold: true,#}
{#                //syncScrolling : false,#}
{#                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea#}
{#                searchReplace: true,#}
{#                watch: false,                // 关闭实时预览#}
{#                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启#}
{#                //toolbar  : false,             //关闭工具栏#}
{#                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启#}
{#                emoji: true,#}
{#                taskList: true,#}
{#                tocm: true,         // Using [TOCM]#}
{#                tex: true,                   // 开启科学公式TeX语言支持，默认关闭#}
{#                flowChart: true,             // 开启流程图支持，默认关闭#}
{#                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,#}
{#                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true#}
{#                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true#}
{#                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true#}
{#                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1#}
{#                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff#}
{#                //imageUpload : false,        //图片上传功能#}
{#                //imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],#}
{#                //imageUploadURL : "./php/upload.php",#}
{#                onload: function () {#}
{#                    console.log('onload', this);#}
{#                }#}
{#            });#}
{#        });#}
{#    </script>#}
    <script type="text/javascript">
        window.jQuery(function () {
            window.jQuery("#btn_upload").click(function () {
                {#debugger#}
                var fileObj = document.getElementById('FileUpload').files[0];
                if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                    alert("请选择图片");
                    return;
                }
                var cover = new FormData();
                cover.append('file', fileObj)
                {#debugger#}
                window.jQuery.ajax({
                    type: 'post',
                    url: "{{ url_for('admin.admin_img_up') }}",
                    data: cover,
                    async: false,
                    dataType: "json",
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data, status) {
                        {#debugger#}
                        {#console.log(data)#}
                        var coverDom = document.getElementById('cover')
                        coverDom.value=data
                    },
                    error: function (xhr, status, errorThrow) {
                        alert('上传失败!')
                        console.log("xhr::"+JSON.stringify(xhr)+" status::"+status+" errorThrow::"+errorThrow)
                    }
                });
            });
        });
    </script>
{% endblock %}